<template>
  <validate-form>
    <div class="mb-3">
      <label class="form-label">邮箱地址</label>
      <validate-input :rule="emailRules" v-model="signData.emailval" type="text" placeholder="请输入邮箱地址"></validate-input>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">昵称</label>
      <validate-input :rule="nameRules" v-model="signData.nameval" type="text" placeholder="请输入昵称" autocomplete="tel"></validate-input>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">密码</label>
      <validate-input :rule="passwordRules" v-model="signData.passwordval" type="password" placeholder="请输入密码" autocomplete="tel"></validate-input>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">重复密码</label>
      <validate-input :rule="repetitionRules" v-model="signData.repetitionval" type="password" placeholder="请再次输入密码" autocomplete="tel"></validate-input>
    </div>
    <template #submit>
      <button type="submit" class="btn btn-primary w-100" @click.prevent="submitForm">注册新用户</button>
    </template>
  </validate-form>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { useRouter } from 'vue-router'
import ValidateInput, { Rule } from '../components/ValidateInput.vue'
import ValidateForm from '../components/ValidateForm.vue'
import Message from '../components/createMessage'
import { post } from '../axiosDefaults'

export default defineComponent({
  name: 'Signup',
  components: {
    ValidateInput,
    ValidateForm
  },
  setup () {
    const router = useRouter()
    // 表单数据
    const signData = reactive({
      emailval: '',
      nameval: '',
      passwordval: '',
      repetitionval: ''
    })
    // 定义邮箱的验证类型数组
    const emailRules: Rule = [
      { type: 'required', message: '不能为空' },
      { type: 'email', message: '邮箱格式不正确' },
      { type: 'range', message: '请输入6-12位邮箱格式' }
    ]
    // 昵称的验证类型数组
    const nameRules: Rule = [
      { type: 'required', message: '不能为空' },
      {
        type: 'range',
        min: {
          message: '你的昵称至少包括2位，不能含有空格',
          length: 2
        },
        max: {
          message: '你的密码最多包括6位，不能含有空格',
          length: 6
        }
      }
    ]
    // 定义密码的验证类型数组
    const passwordRules: Rule = [
      { type: 'required', message: '不能为空' },
      {
        type: 'range',
        min: {
          message: '你的密码至少包括六位，不能含有空格',
          length: 6
        },
        max: {
          message: '你的密码最多包括12位，不能含有空格',
          length: 12
        }
      }
    ]
    // 重复密码的验证类型数组
    const repetitionRules: Rule = [
      { type: 'required', message: '不能为空' },
      {
        type: 'range',
        min: {
          message: '你的密码至少包括六位，不能含有空格',
          length: 6
        },
        max: {
          message: '你的密码最多包括12位，不能含有空格',
          length: 12
        }
      },
      {
        type: 'repeat', // 重复验证逻辑
        isRepeatFn: () => {
          return signData.passwordval === signData.repetitionval
        },
        message: '密码不同'
      }
    ]

    // 点击发送注册表单
    const submitForm = () => {
      const newUserdata = {
        email: signData.emailval,
        nickName: signData.nameval,
        password: signData.passwordval
      }

      post('/users', newUserdata).then(() => {
        Message('注册成功, 正在跳转登录页面', 'success')
        setTimeout(() => {
          router.push('/login')
        }, 2000)
      }).catch(err => {
        console.log(err)
      })
    }

    return { signData, emailRules, passwordRules, nameRules, repetitionRules, submitForm }
  }
})
</script>
